<template>
	<view>
		<scroll-view scroll-x="true" class="margin-bottom">
			<view class="indexInfo flex">
				<view 
					class="index-item radius text-center shadow-blur light" 
					v-for="item in indexList" :key="item.code"
					:class="item.increase_rt >= 0 ? 'gradu-red': 'gradu-green'"
				>
					<view class="text-black">{{item.name}}</view>
					<view class="text-lg text-bold" 
						:class="item.increase_rt >= 0 ? 'text-red': 'text-green'"
					>{{item.price}}</view>
					<view class="text-sm"
						:class="item.increase_rt >= 0 ? 'text-red': 'text-green'"
					>
						<text space="ensp">{{item.increase_rt}}%</text>
					</view>
				</view>
			</view>			
		</scroll-view>
		
		<view class="padding text-bold text-lg">
			板块行情
			<text class="floatR" @click="toggleOrder">{{order?'涨幅':'跌幅'}}</text>
		</view>
		<view class="indus-info">
			<view
				v-for="item in indusList"
				:key="item.f14"
				class="indus-item"
				:class="item.f3 >= 0 ? 'bg-red': 'bg-green'"
			>
				<text class="text-bold">{{item.f14}}</text>
				<h3 class="text-bold text-white">{{item.f3/100}}%</h3>
				<text class="text-sm">{{item.f128}}</text>
			</view>
		</view>
		<!-- <uni-ec-canvas
		  class="uni-ec-canvas"
		  id="line-chart"
		  ref="canvas"
		  canvas-id="lazy-load-chart"
		  :ec="ec"
		></uni-ec-canvas> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: true,
				indusList: [],
				indexList: [
					{increase_rt: 0, name: '上证指数', code: '000001'},
					{increase_rt: 0, name: '深证成指', code: '399001'},
					{increase_rt: 0, name: '创业板指', code: '399006'},
					{increase_rt: 0, name: '上证50', code: '000016'},
					{increase_rt: 0, name: '沪深300', code: '399300'},
					{increase_rt: 0, name: '中证500', code: '000905'},
					{increase_rt: 0, name: '恒生指数', code: 'HSI'},
					{increase_rt: 0, name: '道琼斯', code: 'DJI'},
					{increase_rt: 0, name: '纳指100', code: 'NDX'},
					{increase_rt: 0, name: '标普500', code: 'SPX'},
				],
				ec: {
					option: {}
				},
			}
		},
		onShow() {
			this.getIndusInfo();
			uni.request({
			  url: "https://www.jisilu.cn/data/idx_performance/list/?___jsl=LST___t=" + (new Date()).getTime(),
				method: "post",
			  success: (res) => {
			    const data = res.data.rows;
					this.indexList.forEach(item=>{
						const element = data.find(e=>e.id === item.code);
						Object.assign(item, element.cell)
					})
					this.$forceUpdate()
			  },
			});

		},
		methods: {
			toggleOrder(){
				this.order = !this.order;
				this.getIndusInfo()
			},
			getIndusInfo(){
				
				let url = 'https://71.push2.eastmoney.com/api/qt/clist/get'
				let param = {
					cb: 'cbFun',
					pn: 1,
					pz: 30,
					po: this.order ? 1 : 0,
					np: 1,
					fid: 'f3',
					fs: 'm:90+t:2+f:!50',
					fields: 'f2,f4,f3,f20,f128,f14',
					_: (new Date()).getTime()
				}
				wx.request({
					type: 'get',
					dataType: 'jsonp',
					data: param,
					url: url,
					success: res=>{
						res.data = res.data.replace(/[(cbFun\()(\)\;)]/g, '')
						const data = JSON.parse(res.data);
						this.indusList = data.data.diff;
						// return;
						const arr = [];
						data.data.diff.forEach(item=>{
							arr.push([item.f20/1e8, item.f3/100, item.f14, item.f128])
						})
						this.ec = {
							option: {
								  grid: {
								    left: '8%',
								    top: '10%'
								  },
								  xAxis: {
								    splitLine: {
								      lineStyle: {
								        type: 'dashed'
								      }
								    }
								  },
								  yAxis: {
								    splitLine: {
								      lineStyle: {
								        type: 'dashed'
								      }
								    },
								    scale: true
								  },
								  series: [
								    {
								      name: '涨跌幅',
								      data: arr,
								      type: 'scatter',
								      symbolSize: (data)=>{
								        return Math.abs(data[0]);
								      },
								      emphasis: {
								        focus: 'self',
												scale: true,
												label: {
													show: true,
													formatter: '行业板块：{@[2]}\n涨跌幅度：{@[1]}%\n涨跌股票：{@[3]}',
													position: 'top',
												}
								      },
								      itemStyle: {
												color: 'cyan',
								        shadowBlur: 10,
								        shadowColor: 'rgba(120, 36, 50, 0.5)',
								        shadowOffsetY: 5,
								      }
								    },
									]
							}
						};
					},
				})
			}
		}
	}
</script>

<style>
	.indexInfo{
		width: fit-content
	}
	.index-item{
		width: 120px;
		margin: 0 5px;
		padding: 8px;
	}
	.index-item view{
		line-height: 20px;
	}
	.gradu-red{
		background-image: linear-gradient(to bottom, #fadbd9, #f1f1f1);
	}
	.gradu-green{
		background-image: linear-gradient(to bottom, #d7f0dbff, #f1f1f1);
	}
	.indus-info{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.indus-item{
		width: 30%;
		text-align: center;
		padding: 10px;
		margin: 5px;
		opacity: 0.8;
		border-radius: 5px;
	}
	.floatR{
		float: right;
	}
	.uni-ec-canvas{
		display: block;
		width: 100%;
		height: 400px;
	}
</style>
